<@>layout("/common/default.html"){
<link rel="stylesheet" href="${ctxPath}/static/zTree3.5/css/demo.css" type="text/css">
<link rel="stylesheet" href="${ctxPath}/static/zTree3.5/css/metroStyle/metroStyle.css" type="text/css">
<script type="text/javascript" src="${ctxPath}/static/zTree3.5/js/jquery.ztree.all.js"></script>
<script type="text/javascript" src="${ctxPath}/static/zTree3.5/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${ctxPath}/static/zTree3.5/js/jquery.ztree.exedit.js"></script>


<style>
    ul#menu-tree {
        margin: 0;
        padding: 8px;
        color: #E9E7E7;
        background-color: #e2e2e2;
        font-size: 17px;
    }

    li {
        padding: 0;
        margin: 0;
        outline: 0;
        padding: 6px;

    }

    span {
        list-style: none;
        text-align: left;
        white-space: nowrap;
        outline: 0;
    }

    .ztree * {
        font-size: 15px;
    }
</style>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <span lay-separator="">/</span>
        <a href="">用户权限</a>
        <span lay-separator="">/</span>
        <a>
            <cite>个人菜单管理</cite>
        </a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i>
    </a>
</div>
<div class="x-body">
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="content_wrap">
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="content_wrap">
                <div class="zTreeDemoBackground" id="menu">
                    <!--ztree-->
                    <ul id="menu-tree" class="ztree" style="width: 150%"></ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="content_wrap">
            </div>
        </div>
    </div>
</div>
<script>
    var menuTree;
    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                idKey: "id",
                pIdKey: "parentId",
                enable: true
            },
            key: {
                name: "name",
                url: "url",
                micon: "micon"
            },
            keep: {
                leaf: true,
                parent: true
            }
        },
        edit: {
            enable: true,
            showRenameBtn: false,
            showRemoveBtn: false
        },
        callback: {
            onDrop: onDrop
        }
    };

    $(function () {
        $.cajax('${ctxPath}/ajax/userpermission/menu/indexMenuZtree', {}, function (r) {
            var code = r.code;
            var msg = r.msg;
            if (code == '1') {
                var menuNodes = r.datas;
                menuTree = $.fn.zTree.init($("#menu-tree"), setting, menuNodes);
            } else {
                $.msg(msg, function () {
                }, 2);
            }
        });
    });

    function onDrop(event, treeId, treeNodes, targetNode, moveType) {
        var treeObj = $.fn.zTree.getZTreeObj("menu-tree");
        var jsonArry = treeObj.transformToArray(treeObj.getNodes());
        if (jsonArry) {
            var json = '[';
            for (var i = 0; i < jsonArry.length; i++) {
                var arry = jsonArry[i];
                var pid = '';
                var url = '';
                var icon = '';
                if (arry.parentId) {
                    pid = arry.parentId;
                }
                if (arry.url) {
                    url = arry.url;
                }
                if (arry.micon) {
                    icon = arry.micon;
                }
                json += '{"id":"' + arry.id + '","parentId":"' + pid + '","name":"' + arry.name + '","url":"' + url + '","icon":"' + encodeURIComponent(icon) + '"},';
            }
            json = json.substring(json, json.length - 1);
            json += ']';
            $.cajax('${ctxPath}/ajax/userpermission/menu/saveCustomMenu?json=' + json, {}, function (r) {
                var code = r.code;
                var msg = r.msg;
                $.msg(msg, function () {
                }, code);
            });
        }
    }
</script>

<hr>
<@>}